<template>
    <!-- 歌手列表容器 -->
    <div class="songs-container">
      <!-- 页面主标题 -->
      <h1 class="title">歌手界面</h1>
      <!-- 歌手列表区域 -->
      <div class="song-list">
        <!-- 单个歌手卡片，使用v-for循环渲染 -->
        <div class="song-card" v-for="(song, index) in songList" :key="index">
          <!-- 歌手封面图片 -->
          <img :src="song.imageUrl" alt="歌手封面" class="song-cover">
          <!-- 歌手信息区域 -->
          <div class="song-info">
            <!-- 歌手名称 -->
            <h2 class="song-title">{{ song.title }}</h2>
            <!-- 播放链接，新标签页打开 -->
            <a :href="song.musicLink" class="play-link" target="_blank">播放</a>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 模拟歌手数据数组
  const songList = [
    {
      title: "张杰", // 歌手姓名
      imageUrl: "https://star.kuwo.cn/star/starheads/300/76/9/646457804.jpg", // 歌手封面图片URL
      musicLink: "https://example.com/song1.mp3" // 音乐播放链接
    },
    {
      title: "周杰伦", 
      imageUrl: "https://star.kuwo.cn/star/starheads/300/s4s22/47/783999746.png",
      musicLink: "https://example.com/song2.mp3"
    },
    {
      title: "薛之谦",
      imageUrl: "https://star.kuwo.cn/star/starheads/300/55/34/3003330369.jpg",
      musicLink: "https://example.com/song3.mp3"
    }
  ];
  </script>
  
  <style scoped>
  /* 歌手列表容器样式 */
  .songs-container {
    padding: 20px; /* 内边距 */
    background-color: #f4f4f4; /* 背景色 */
  }
  
  /* 标题样式 */
  .title {
    text-align: center; /* 居中 */
    color: #333; /* 文字颜色 */
    margin-bottom: 30px; /* 下边距 */
  }
  
  /* 歌手列表布局 */
  .song-list {
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-around; /* 均匀分布 */
  }
  
  /* 单个歌手卡片样式 */
  .song-card {
    width: 300px; /* 固定宽度 */
    margin-bottom: 30px; /* 下边距 */
    background-color: white; /* 背景色 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: transform 0.3s ease; /* 过渡动画 */
  }
  
  /* 卡片悬停效果 */
  .song-card:hover {
    transform: translateY(-5px); /* 上移5像素 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 增强阴影 */
  }
  
  /* 歌手封面图样式 */
  .song-cover {
    width: 100%; /* 宽度100% */
    height: 200px; /* 固定高度 */
    object-fit: cover; /* 保持比例填充 */
  }
  
  /* 歌手信息区域样式 */
  .song-info {
    padding: 15px; /* 内边距 */
  }
  
  /* 歌手标题样式 */
  .song-title {
    margin: 0; /* 去除默认边距 */
    color: #333; /* 文字颜色 */
  }
  
  /* 播放链接样式 */
  .play-link {
    display: inline-block; /* 行内块元素 */
    margin-top: 10px; /* 上边距 */
    padding: 5px 10px; /* 内边距 */
    background-color: #007bff; /* 背景色 */
    color: white; /* 文字颜色 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 3px; /* 圆角 */
    transition: background-color 0.3s ease; /* 过渡动画 */
  }
  
  /* 播放链接悬停效果 */
  .play-link:hover {
    background-color: #0056b3; /* 背景色变深 */
  }
  </style>